<template>
  <div id="home">
    <div>
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title"
            ><i class="el-icon-star-on"></i>
            沈阳市统筹推进新冠肺炎疫情防控和经济社会发展工作指挥部令（第18号）2021年1月5日
          </template>
          <div class="article">
            各区、县（市）疫情防控指挥部，市指挥部各成员单位，市直各单位：<br />
            沈阳市新冠肺炎疫情防控进入关键时期，为深入贯彻习近平总书记关于疫情防控工作重要讲话和指示批示精神，全面落实国务院联防联控机制有关要求，按照省委、省政府决策部署，进一步坚持问题导向，强化底线思维，筑牢风险边界，迅速消除传播隐患，坚决打赢疫情防控阻击战，经市指挥部研究决定，下达命令如下：<br />
            一、加强暴露人群管理，强化风险意识，通过流行病学调查和大数据研判，精准核查在被污染环境中的暴露人群，并对其采取“三封闭”管控措施，即“封住户门、封单元门、封小区门”，坚决防止疫情大面积社区传播。<br />
            二、完善患者入院筛查程序，严格落实应检尽检要求，全部住院患者及陪护人员均须进行核酸检测。切实加强陪护管理，建立登记制度，对陪护人员做好体温检测、健康状况监测等工作。加强病区病房门禁、安保管理，陪护人员原则上不离院，确需离院的，须再次进行核酸检测。<br />
            三、对疑似或确诊病例、无症状感染者的密切接触者及密切接触者的密切接触者严格实施14天集中隔离医学观察，集中隔离起始时间从最后接触阳性感染者或离开被污染环境开始计算，期间第1、3、5、7、13天进行核酸检测，第7、13天进行血清抗体检测，核酸检测和血清抗体检测均为阴性者可解除隔离。集中隔离解除后，实行7天社区健康监测，非必要不外出。<br />
            四、加强集中隔离宾馆管理，隔离宾馆管理人员必须做血清抗体检测，排除风险隐患。落实实名登记制度，建立集中隔离人员登记信息台账，明确集中隔离人员与疑似或确诊病例、无症状感染者的密接关系。落实单人单间隔离制度。严把解除隔离标准，并及时向社区等相关单位、部门推送解除隔离人员信息。落实集中隔离场所卫生管理制度，规范执行消毒、通风等防控措施，做好人员卫生防护。<br />
            五、从即日起，对我市作为第一入境点且目的地为外省、省内外市的入境人员，实施“14+7”天集中隔离观察，期间进行3次核酸检测、2次血清抗体检测，食宿费用自理。<br />
            六、中风险地区和重点管控区域人员一律不允许离沈，其他地区人员非必要不离沈，确需离沈的人员，须到具有资质的医疗机构进行单人、单管、单采核酸检测，并持有72小时内核酸检测阴性证明到所在单位或社区登记报备，全员核酸检测结果不作为离沈依据。<br />
            七、加强离沈通道联防联控，成立工作专班，加大查控力度，对驾驶、乘坐交通工具或以其他方式违反规定擅自离沈，导致疫情传播后果的，将严格依法追究相关责任人的法律责任，并作为失信人员纳入个人信用档案。<br />
            八、具有核酸检测资质的医疗机构要落实首检负责制，检测出混检样本结果为阳性的，须立即通知样本送检单位并报告属地区、县（市）级疫情防控指挥部，同时将阳性样本送沈阳市疾病预防控制中心保存。<br />
            <pre>
                                                                                                        沈阳市统筹推进新冠肺炎疫情防控和经济社会发展工作指挥部</pre
            >
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="current">
      <div class="title">{{ currentTime }}</div>
      <div>
        <el-row :gutter="5">
          <el-col
            v-for="(item, index) in epidemicData.currentData"
            :key="index"
            :span="8"
          >
            <div class="currentBg">
              <div class="colorDiv">{{ item.num }}</div>
              <div>{{ item.name }}</div>
              <div>
                <b>{{ item.add }}</b>
                <b class="addColor">{{ item.f }}{{ item.addnum }}</b>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="history">
      <div class="title">截止日期：{{ currentTime }}24时</div>
      <div>
        <el-row :gutter="10">
          <el-col
            v-for="(item, index) in epidemicData.historyData"
            :key="index"
            :span="8"
          >
            <div class="currentBg historyBg">
              <div class="colorDiv">{{ item.num }}</div>
              <div>{{ item.name }}</div>
              <div>
                <b>{{ item.add }}</b>
                <b class="addColor">{{ item.f }}{{ item.addnum }}</b>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="tableDiv">
      <div class="title">国内病例</div>
      <el-table
        :header-cell-style="cellClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          prop="province"
          label="地区"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="confirmed"
          label="新增确诊"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="suspected"
          label="新增疑似"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="dead"
          label="新增死亡"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="cure"
          label="新增治愈"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="outside"
          label="境外输入"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="severe"
          label="新增重症"
        ></el-table-column>
      </el-table>
    </div>
    <div class="articleDiv">
      <div class="title">最新进展</div>
      <div class="content">
        <!-- 列表展示区域 -->
        <div class="contentList">
          <div
            @click="
              currentArticle = item;
              dialogVisible = true;
            "
            v-for="(item, index) in listData"
            :key="item.id"
          >
            <div class="listHeader">
              <div class="circle"></div>
              <el-tag v-if="index == 0" size="mini" type="danger" effect="dark"
                >最新</el-tag
              >
              <span>{{
                moment(item.publishTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </div>
            <div class="listContent">{{ item.title }}</div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="contentPage">
          <el-pagination
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :title="currentArticle.title"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <div>
        {{ moment(currentArticle.publishTime).format("YYYY-MM-DD HH:mm:ss") }}
      </div>
      <!-- v-html可以将代码片段字符串设置到内部内容区 -->
      <span class="imgWidth" v-html="currentArticle.content"></span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../utils/request";
let moment = require("moment");
export default {
  data() {
    return {
      activeName: "1",
      dialogVisible: false,
      // 当前查看内容的资讯对象
      currentArticle: {},
      // 最新进展数据
      listData: [],
      // 进展数据总数
      total: 0,
      // 分页参数
      pageParam: {
        page: 1,
        pageSize: 10,
        categoryId: 3,
      },
      // 国内病例数据
      tableData: [],
      // 当天时间 new Date()
      currentTime: this.moment(new Date()).format("M月D日"),
      epidemicData: {
        //当天疫情数据和历史疫情数据
        currentData: [
          {
            name: "新增确诊",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(0, 3),
            num: this.getRandom(5, 10),
          },
          {
            name: "本土新增",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(0, 3),
            num: this.getRandom(0, 3),
          },
          {
            name: "境外输入",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(0, 3),
            num: this.getRandom(0, 10),
          },
        ],
        historyData: [
          {
            name: "累计确诊",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(1, 3),
            num: this.getRandom(80000, 100000),
          },
          {
            name: "累计境外输入",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(1, 3),
            num: this.getRandom(500, 2000),
          },
          {
            name: "累计死亡",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(0, 2),
            num: this.getRandom(500, 3000),
          },
          {
            name: "现有确诊",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(1, 3),
            num: this.getRandom(20, 30),
          },
          {
            name: "现有重症",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(5, 10),
            num: this.getRandom(10, 20),
          },
          {
            name: "累计出院",
            add: "较昨日：",
            f: "+",
            addnum: this.getRandom(3, 9),
            num: this.getRandom(70000, 80000),
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    moment,
    // 当前页发生变化
    currentChange(val) {
      this.pageParam.page = val;
      this.findArticle();
    },
    // 分页获取最新进展的资讯信息
    async findArticle() {
      let res = await axios.get("/article/pageQuery", {
        params: this.pageParam,
      });
      this.listData = res.data.list;
      this.total = res.data.total;
    },
    // 表格表头列背景
    cellClass({ columnIndex }) {
      // columnIndex是列索引，从0开始
      let color = "#e0e0fe";
      if (columnIndex == 1) color = "#DF837D";
      if (columnIndex == 2) color = "#F5D4A7";
      if (columnIndex == 3) color = "#FECCCA";
      if (columnIndex == 4) color = "#C4EBB2";
      if (columnIndex == 5) color = "#D2D2D2";
      if (columnIndex == 6) color = "#E5F2F2";
      return {
        backgroundColor: color,
        color: "#000",
        height: "60px",
      };
    },
    getRandom(num1, num2) {
      //40-200    0-160 + 40
      return Math.round(Math.random() * (num2 - num1) + num1);
    },
  },
  async created() {
    this.findArticle();
    let res = await axios.get("/epidemic/pageQuery", {
      params: { page: 1, pageSize: 20 },
    });
    this.tableData = res.data.list;
  },
};
</script>
<style scoped>
.currentBg {
  background-color: #eefaff;
  height: 130px;
  border-radius: 5px;
  /* 上下 左右 */
  padding: 20px 0;
  /* 设置 height为整个容器的高度 */
  box-sizing: border-box;
  text-align: center;
  line-height: 30px;
  /* 字体大小 */
  font-size: 15px;
  /* 字体加粗 */
  font-weight: bold;
  margin-bottom: 5px;
}
.historyBg {
  background-color: #fbf5ef;
}
.colorDiv {
  color: coral;
}
.addColor {
  color: #ff425e;
}
.title {
  color: #999;
  margin-bottom: 5px;
}
.contentList {
  background-color: #f8f8f8;
  padding: 20px;
}
.listHeader > * {
  margin-right: 3px;
}
.listHeader > span:last-child {
  position: relative;
  top: 1px;
  font-size: 14px;
}
.circle {
  width: 10px;
  height: 10px;
  background-color: #0056ff;
  display: inline-block;
  border-radius: 50%;
}
.listContent {
  padding: 16px;
  border-radius: 5px;
  color: #666;
  background-color: #fff;
  margin-top: 5px;
  font-size: 14px;
  margin-bottom: 10px;
}
.news {
  color: red;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
}
</style>